<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>国庆头像生成页 </title>
    <meta name="description" content="一键生成国庆红旗渐变头像">
    <meta name="keywords" content="国庆,十月一日,头像,国庆头像">
    <style>
        a:link {
            color: #fff;
            text-decoration: none;
        }

        a:visited {
            color: #fff;
        }

        #export {
            display: none;
            margin: 0 auto;
            width: 250px;
            height: 250px;
            margin-top: 50px;
            margin-bottom: 50px
        }

        .operation-btns .o-btn1 {
            background-size: 11.6rem 4.325rem
        }

        .operation-btns .o-btn2 {
            background-size: 11.6rem 3.75rem
        }

        center {
            color: #fff;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="css/strap.min.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>

<body>
<div class="wrapper">
    <img src="" alt="" class="img-load" style="width: 9.5rem; position: fixed; top: 0px; left: -9999px;">
    <div class="operation-header">
        <div class="h-title">
        </div>
    </div>
    <div class="operation-box">
        <a class="prev" onclick="changeHat()">
        </a>
        <div class="operation-img">
            <div class="cropper-content" id="content">
                <canvas class="" id="cvs">
                </canvas>
            </div>
        </div>
        <a class="next" onclick="changeHat()">
        </a>
    </div>
    <img id="export" alt="国庆专属头像" src="">
    <div class="operation-btns">
        <a class="o-btn1">
            <input class="o-btn1" id="upload" type="file" onchange="viewer()" style="opacity: 0;">
        </a>
        <a class="o-btn2" onclick="exportFunc()" style="display: none;">
        </a>
    </div>
    <div class="operation-done">
        <img src="img/act-done-happy.png" alt="" class="act-done-happy">
    </div>
    <div class="recommon-wrap">
        <a href="https://gitee.com/createsmile">
            ❤️程序源码Gitee下载地址
        </a>
    </div>
</div>
<div style="display: none">
    <img id="img" src="" alt="">
    <img class="hide" id="hat0" src="img/hat6.png">
    <img class="hide" id="hat1" src="img/hat0.png">
    <img class="hide" id="hat2" src="img/hat2.png">
    <img class="hide" id="hat3" src="img/hat3.png">
    <img class="hide" id="hat4" src="img/hat1.png">
    <img class="hide" id="hat5" src="img/hat4.png">
    <img class="hide" id="hat6" src="img/hat5.png">
    <img class="hide" id="hat7" src="img/hat7.png">
</div>
<script src="js/fabric.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    //禁止页面拖动
    document.body.addEventListener('touchmove', function (e) {
        e.preventDefault();
    });
    var cvs = document.getElementById("cvs");
    var ctx = cvs.getContext("2d");
    var exportImage = document.getElementById("export");
    var img = document.getElementById("img");
    var hat = "hat0";
    var canvasFabric;
    var hatInstance;
    //var screenWidth = window.screen.width < 500 ? window.screen.width : 300;
    var screenWidth = document.getElementById("content").scrollHeight;

    function viewer() {
        var file = document.getElementById("upload").files[0];
        console.log(file);
        var reader = new FileReader;
        if (file) {
            reader.readAsDataURL(file);
            reader.onload = function (e) {
                img.src = reader.result;
                img.onload = function () {
                    img2Cvs(img)
                }
            }
        } else {
            img.src = ""
        }
    }

    function img2Cvs(img) {
        cvs.width = img.width;
        cvs.height = img.height;
        cvs.style.display = "block";
        canvasFabric = new fabric.Canvas("cvs", {
            width: screenWidth,
            height: screenWidth,
            backgroundImage: new fabric.Image(img, {
                scaleX: screenWidth / img.width,
                scaleY: screenWidth / img.height
            })
        });
        changeHat();

        document.getElementsByClassName("o-btn1")[0].style.display = "none";
        document.getElementsByClassName("o-btn2")[0].style.display = "block";
        //document.getElementById("tip").style.opacity = 1
    }

    function changeHat() {
        document.getElementById(hat).style.display = "none";
        var hats = document.getElementsByClassName("hide");
        hat = "hat" + (+hat.replace("hat", "") + 1) % hats.length;
        var hatImage = document.getElementById(hat);
        hatImage.style.display = "block";
        if (hatInstance) {
            canvasFabric.remove(hatInstance)
        }
        console.log(hatImage.width);
        console.log(100 / hatImage.width);
        hatInstance = new fabric.Image(hatImage, {
            top: 0,
            left: 0,
            scaleX: screenWidth / hatImage.width,
            scaleY: screenWidth / hatImage.height,
            cornerColor: "#0b3a42",
            cornerStrokeColor: "#fff",
            cornerStyle: "circle",
            transparentCorners: false,
            rotatingPointOffset: 30
        });
        hatInstance.setControlVisible("bl", false);
        hatInstance.setControlVisible("tr", false);
        hatInstance.setControlVisible("tl", false);
        hatInstance.setControlVisible("mr", false);
        hatInstance.setControlVisible("mt", false);
        canvasFabric.add(hatInstance)
    }

    function exportFunc() {
        document.getElementsByClassName("operation-box")[0].style.display = "none";
        document.getElementsByClassName("operation-btns")[0].style.display = "none";

        /*document.getElementById("exportBtn").style.display = "none";
document.getElementById("tip").innerHTML = "长按图片保存或分享";
document.getElementById("change").style.display = "none";*/
        cvs.style.display = "none";
        exportImage.style.display = "block";
        exportImage.src = canvasFabric.toDataURL({
            width: screenWidth,
            height: screenWidth
        });
        alert('长按图片保存或分享');
    }
</script>
</body>

</html>
